<template>
  <div class="acceptance-box">
    <!-- 验收 -->
    <serchForm
      :Form="inventoryForm"
      :FormLabel="inventoryFormLabel"
      @onSearch="onSearch"
    />
    <!-- <div class="function-box">
        <el-button class="createBtn" @click="addOutboundOrder"><i class="iconfont icon-plus-square" />新增</el-button>
        <el-button class="visitBtn" @click="updateOutboundOrder"><i class="iconfont icon-wode" />任务分配</el-button>
        <el-button class="exportBtn" @click="deleteData"><i class="iconfont icon-shanchu" />删除</el-button>
    </div> -->
    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="totals"
      :page="pageNum"
      :limit="pageSize"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      :tableHeaderData="inventoryTableHeaderData"
      :tableData="inventoryTableData"
      @tableDetail="tableDetail"
    >
    </forTableCom>
    <!-- <outboundOrderCom @popUpsFlase="popUpsFlase" v-if="flag" :popTitle="popTitle" :disabled="disabled"
        @getoutboundOrderData="getoutboundOrderData" :PopData="PopData" :defindFlag="defindFlag"/> -->
  </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue'
import forTableCom from '@/components/forTableCom/index.vue'
import { getWorkApi } from '@/api/tickets'
import { querySelectOutboundApi, deleteSelectOutboundApi } from '@/api/inventory'
import { ref, onMounted } from 'vue'
import { sliceDate } from '@/utils/date.js'
import { ElMessage, ElMessageBox } from 'element-plus'
// import outboundOrderCom from './components/outboundOrderCom'
import { updatePopHook } from '@/hook/setPop/updatePop.js'
import { processListApi } from '@/api/teams/index.js'

let updatePop = updatePopHook()

// 弹窗
let flag = ref(false)
let disabled = ref(false)
// 弹窗标题
let popTitle = ref('新增出库单信息')
// 表格
let color = ref('#333')
let bg = ref('#F6F6F6')

// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])
// 修改详情回显数据弹窗
let PopData = ref([])
// 详情控制变量
let defindFlag = ref(true)
// 删除勾选的列API
const deleteSelectOutbound = async (data) => {
  let res = await deleteSelectOutboundApi(data)
  let { code } = res
  if (code === 200) {
    queryOutboundList()
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
  } else {
    ElMessage({
      type: 'error',
      message: '删除错误',
    })
  }
}

// 勾选背景id
const idActive = 'constructionTeamId'

// 表单
let inventoryForm = ref({
  constructionTeamId: '', //施工队编号
  constructionTeamName: '', //施工队名称
  completionDate: '', // 完工日期
  creator: '', // 制单人
})
// 表单数据标题
let inventoryFormLabel = ref([
  {
    name: 'constructionTeamId',
    label: '施工队编号',
  },
  {
    name: 'constructionTeamName',
    label: '施工队名称',
  },
  {
    name: 'completionDate',
    label: '完工日期',
  },
  {
    name: 'creator',
    label: '制单人',
  },
])

// 表格表头数据
let inventoryTableHeaderData = ref([
  {
    prop: 'orderId',
    label: '单据编号',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'constructionTeamId',
    label: '施工队编号',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'constructionTeamRegion',
    label: '施工队区域',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'constructionTeamName',
    label: '施工队名称',
    minwidth: 100
  },
  {
    prop: 'completionDate',
    label: '完工日期',
  },
  {
    prop: 'replyCustomers',
    label: '是否回访',
  },
  {
    prop: 'acceptanceRemark',
    label: '备注',
  },
  {
    prop: 'acceptancePhotos',
    label: '验收自拍照',
    minwidth: 100
  },
  {
    prop: 'acceptanceFormPhotos',
    label: '验收单',
  },
  {
    prop: 'payBills',
    label: '工费单',
  },
  {
    prop: 'acceptanceFinishTime',
    label: '验收完毕时间',
    minwidth: 120
  },
  {
    prop: 'creator',
    label: '制单人',
  },
])
// 表格数据内容
let inventoryTableData = ref([

])

// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
}

// 详情双击行
const tableDetail = (props) => {
  disabled.value = true
  flag.value = true
  popTitle.value = '出库单详情信息'
  defindFlag.value = false
  PopData.value = props
}
// 关闭弹窗
const popUpsFlase = (v) => {
  flag.value = v
  defindFlag.value = true
}
// 查询入库单数据
const queryOutboundList = async (data = '') => {
  data.status = '待验收'
  let res = await processListApi(data)
  let { code, rows, total } = res
  if (code == 200) {
    // 改变日期显示长度问题
    rows.forEach(item => {
      item.replyCustomers = item.replyCustomers === 1 ? true : false
    })
    inventoryTableData.value = rows
    totals.value = total
  }
}
// 查找
const onSearch = (v) => {
  // 每次查询后回到页1
  pageNum.value = 1
  queryOutboundList(v)
}

// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit
  let obj = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  let params = Object.assign(obj, inventoryForm.value)
  queryOutboundList(params)
}
// 请求出库单接口函数
const getoutboundOrderData = () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  queryOutboundList(params)
}
// 获取客户下拉信息
const getWorkInfo = async (data = '') => {
  let params = { customerName: data }
  let res = await getWorkApi(params)
  if (res.code == 200) {
    res.data.forEach((v, i) => {
      //  inventoryFormLabel.value 不能乱排
      inventoryFormLabel.value[3].client[i].label = v.customerName
      inventoryFormLabel.value[3].client[i].value = v.customerId
    })
  }
}
onMounted(() => {
  // getWorkInfo()
  getoutboundOrderData()
})
</script>
<style scoped lang="scss">
:deep(.el-image-viewer__img) {
  width: 50% !important;
  height: auto !important;
}

.acceptance-box {
  padding: 16px;
}
</style>
